<script setup lang="ts">
import { reactive } from 'vue';
import Echarts from '@/components/ReEcharts/index.vue';

let valueList = [30, 50, 60, 65, 70, 80, 90, 100, 120];
let colorList = ['#FAAD14', '#13C2C2', '#14A8FF', '#23D688', '#397EF0'];
let fontSizeList = [12, 14, 16, 18];
let data = [];

let nameList = reactive([
	'Vue3.0',
	'Pinia',
	'Echarts',
	'Element-Plus',
	'axios',
	'Vite',
	'Pure-Admin',
	'Vitality',
	'Husky'
]);
nameList.forEach((item, index) => {
	let valueIndex = index % valueList.length;
	let colorIndex = index % colorList.length;
	let fontSizeIndex = index % fontSizeList.length;

	data.push({
		name: item,
		value: valueList[valueIndex],
		label: {
			color: colorList[colorIndex],
			fontSize: fontSizeList[fontSizeIndex]
		}
	});
});

const option = reactive({
	color: colorList,
	graphic: [
		{
			id: 'baPng',
			type: 'image',
			left: 'center',
			top: 'center',
			style: {
				image:
					'',
				width: '400',
				height: '400'
			}
		}
	],
	series: [
		{
			type: 'graph',
			layout: 'force',
			force: {
				repulsion: 85, // 节点之间的斥力因子
				edgeLength: 85, //边的两个节点之间的距离
				layoutAnimation: true,
				friction: 0.3
			},
			roam: false,
			symbol: '',
			symbolSize: 0,
			label: {
				show: true,
				color: 'auto'
			},
			draggable: false,
			data: data
		}
	]
});
</script>

<template>
	<div class="h-full">
		<Echarts :option="option" />
	</div>
</template>
